<!--终端新增modal-->
<template xmlns='http://www.w3.org/1999/html'>
  <a-modal
    title='销量数据'
    width='70%'
    :visible='visible'
    :confirmLoading='confirmLoading'
    switchFullscreen
    @cancel='handleCancel'
    @ok='handleOk'
    cancelText='关闭'
    style='height: 100%;overflow: auto;padding-bottom: 53px;'>
    <template slot='footer'>
      <a-button @click='handleCancel' type='primary' :loading='confirmLoading'>确认</a-button>
      <a-button @click='handleCancel'>关闭</a-button>
    </template>
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <a-row :gutter='24' style='border-bottom: 1px solid #e5e5e5'>
          <div class='basicNew'>基本信息</div>
          <a-col :md='8' :sm='24'>
            <a-form-item label='活动编码' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input :disabled='true' placeholder='请输入终端名称'
                       v-decorator="['actCode', validatorRules.actCode]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item label='活动名称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input :disabled='true' placeholder='请输入活动名称'
                       v-decorator="['actName', validatorRules.actName]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='活动时间'
              >
              <a-range-picker :disabled='true' showTime format='YYYY-MM-DD' v-decorator="[ 'punchTime', {}]"
                              showTime :placeholder="['开始时间','结束时间']" style='width:100%' />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item label='终端编码' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input :disabled='true' placeholder='请输入终端编码'
                       v-decorator="['terminalCode', validatorRules.terminalCode]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item label='终端名称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input :disabled='true' placeholder='请输入终端名称'
                       v-decorator="['terminalName', validatorRules.terminalName]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item label='提交时间' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input :disabled='true' placeholder='请输入提交时间'
                       v-decorator="['createTime', validatorRules.createTime]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item label='姓名' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input :disabled='true' placeholder='请输入姓名'
                       v-decorator="['createName', validatorRules.createName]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item label='职位' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input :disabled='true' placeholder='请输入职位'
                       v-decorator="['positionName', validatorRules.positionName]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item label='所属组织' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input :disabled='true' placeholder='请输入所属组织'
                       v-decorator="['orgName', validatorRules.orgName]" />
            </a-form-item>
          </a-col>
        </a-row>
        <!--      执行结果-->
        <div class='bottom-box'>
          <div class='first-line'>
            <span style='font-weight: 700'>商品信息 :</span>
            <span>定位信息 : {{model.address}}</span>
          </div>
          <div class='second-table'>
            <div style='line-height: 40px;padding: 0 10px'>
              <span style='margin-right: 120px'>系列数 : {{model.seriesSum}}</span>
              <span style='margin-right: 120px'>商品种数 : {{model.productSum}}</span>
              <span>总销售金额 : {{model.priceAmount}}</span>
            </div>
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
            >

            </a-table>
          </div>
        </div>
      </a-form>

      <proChose ref='prochoose' v-bind='modalProps' @okbro='okbropro'></proChose>
      <!--      <formItemsDraw ref='modalForm' @okpopup='modalFormOk' v-bind='configw'></formItemsDraw>-->
    </a-spin>
  </a-modal>
</template>

<script>

import pick from 'lodash.pick'
import AFormItem from 'ant-design-vue/es/form/FormItem'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import JImageUpload from '@/components/cn-form/JImageUpload'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import JSelectUserByDep from '@/components/cn-select-popup/JSelectUserByDep'
import JSelectTerminal from '@/components/cn-select-popup/JSelectTerminal'
import Area from '@comp/utils/Area'
import proChose from '@comp/cn-components/ProChose'
import JAreaLinkage from '@comp/cn-form/CnAreaLinkage'

import { queryDepartTreeList } from '@/api/api'
import { getAction, postAction, deleteAction } from '@/api/manage'
import moment from 'moment'

export default {
  name: 'salesDetailModal',
  components: {
    JImageUpload,
    AFormItem,
    ATextarea,
    JTreeSelect,
    JSelectUserByDep,
    JSelectTerminal,
    JAreaLinkage,
    proChose
  },
  data() {
    return {
      custList: [],
      name: '',
      areaLinkage: '',
      province: '',
      city: '',
      area: '',
      custCode: '',
      custName: '',
      showCode: 4,
      terminalName: '',
      terminalCode: '',
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: {
          span: 24
        }
        ,
        sm: {
          span: 5
        }
      }
      ,
      wrapperCol: {
        xs: {
          span: 24
        }
        ,
        sm: {
          span: 19
        }
      }
      ,
      labelCol1: {
        xs: {
          span: 24
        }
        ,
        sm: {
          span: 3
        }
      }
      ,
      wrapperCol1: {
        xs: {
          span: 24
        }
        ,
        sm: {
          span: 21
        }
      }
      ,
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        warehouseCode: {
          rules: [{
            required: true, message: '请输入仓库编码!', trigger: 'submit'
          }]
        }
        ,
        warehouseName: {
          rules: [{
            required: true, message: '请输入仓库名称!', trigger: 'submit'
          }]
        }
        ,
        warehouseType: {
          rules: [{
            required: true, message: '请选择类型!', trigger: 'submit'
          }]
        }
        ,
        status: {
          rules: [{
            required: true, message: '请选择状态!', trigger: 'submit'
          }]
        }
      }
      ,
      url: {
        add: window._CONFIG['domianURL'] + '/cnTerminalController/saveOrUpdateTerminal',
        check: window._CONFIG['domianTpmURL'] + 'report/tpmActExecuteReport/examineReport'

      },
      treeData: [],
      columns:[
        {
          title: '商品层级编码',
          dataIndex: 'productSeriesCode',
          align: 'center'
        },
        {
          title: '商品层级名称',
          dataIndex: 'productSeriesName',
          align: 'center'
        },
        {
          title: '商品编码',
          dataIndex: 'productCode',
          align: 'center'
        },
        {
          title: '商品名称',
          dataIndex: 'productName',
          align: 'center'
        },
        {
          title: '数量',
          dataIndex: 'num',
          align: 'center'
        },
        {
          title: '销售金额',
          dataIndex: 'price',
          align: 'center'
        },
        {
          title: '小计',
          dataIndex: 'prices',
          align: 'center'
        },
        {
          title: '说明',
          dataIndex: 'remarks',
          align: 'center'
        },
      ],
      dataSource:[],
    }
  },
  methods: {

    personChange(e) {
      console.log(e)
    },
    loadTree() {
      var that = this
      queryDepartTreeList().then((res) => {
        if (res.success) {
          that.treeData = []
          let treeList = res.result
          for (let a = 0; a < treeList.length; a++) {
            let temp = treeList[a]
            temp.isLeaf = temp.leaf
            that.treeData.push(temp)
          }
        }
      })
    },

    addTicket() {
      let modal = JSON.parse(JSON.stringify(this.itemModal))
      this.formItems.push(modal)
      console.log(this.formItems)
    },
    modalFormOk(e1, e2) {
      console.log(e1, e2)
    },
    initAreaData() {
      if (!this.areaData) {
        this.areaData = new Area()
      }
    },
    areaChange(code) {
      let cities = this.areaData.getText(code, '多个值').cities
      let codes = this.areaData.getText(code, '多个值').codes
      this.model.province = cities.split('/')[0]
      this.model.city = cities.split('/')[1]
      this.model.area = cities.split('/')[2]
      this.model.provinceCode = this.dealCode(codes.split('/')[0], 2).join('')
      this.model.cityCode = this.dealCode(codes.split('/')[1], 4).join('')
      this.model.areaCode = this.dealCode(codes.split('/')[2], 6).join('')
      console.log(this.model)
    },
    // params:code:编码，count位数
    dealCode(code, count) {
      console.log(code)
      let num = code.split('')
      let codes = []
      for (let i = 0; i < count; i++) {
        codes.push(num[i])
      }
      return codes
    },
    add() {
      this.edit({})
    },
    edit(record) {
      console.log(record)
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.dataSource = this.model.salesProductVos || []
        this.form.setFieldsValue(pick(this.model, Object.keys(this.model)))

        this.form.setFieldsValue({ punchTime: this.model.startDate ? [moment(this.model.startDate, 'YYYY-MM-DD'), moment(this.model.endDate, 'YYYY-MM-DD')] : null })
      })
    },
    close() {
      this.visible = false
    },
    okbropro(record, status, status2, status3) {
      console.log(record, status, status2, status3)
      if (status2 == 'customerCode') {
        this.form.setFieldsValue({
          customerCode: record[0].customerCode,
          customerName: record[0].customerName
        })
      } else if (status == 'personCode') {
        this.form.setFieldsValue({
          person: record[0].username,
          organization: record[0].orgCode
        })
      } else if (status == 'custOrgCode') {
        this.form.setFieldsValue({
          custOrgCode: record[0].superCode
        })
      }
    },

    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          // if (values.imgs && values.imgs.length) {
          //   values.imgs.slice(0).map((url, index) => {
          //     extendVos.push({
          //       dataType: 1,
          //       code: url,
          //       orderNum: index
          //     })
          //   })
          // }
          that.confirmLoading = true
          let formData = Object.assign({}, this.model, values, this.areaLinkage)
          formData.extendVos = this.formItems

          postAction(this.url.add, formData).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })
        }
      })
    },
    handleCancel() {
      this.close()
    }
  },
  created() {
    this.initAreaData()
    this.loadTree()
  },
  computed: {
    modalProps() {
      return Object.assign({}, {
        name: this.name
      })
    },
    configw() {
      return {
        title: '新增发票信息',
        width: '40%',
        config: {
          list: [
            {
              label: '客户名称',
              type: 'input',
              disabled: true,
              placeholder: '请输入路由ID',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              label: '上账科目编码',
              type: 'input',
              placeholder: '请输入上账科目编码',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              label: '发票编码',
              type: 'input',
              placeholder: '请输入发票编码',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              label: '税码',
              type: 'input',
              placeholder: '请输入税码',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              label: '发票金额',
              type: 'input',
              placeholder: '请输入发票金额(不含税)',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              label: '发票金额',
              type: 'input',
              placeholder: '请输入发票金额(含税)',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              label: '税金',
              type: 'input',
              placeholder: '请输入税金',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              label: 'ERP成本中心',
              type: 'input',
              placeholder: '请输入ERP成本中心',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            },
            {
              label: '摘要',
              type: 'input',
              placeholder: '请输入摘要',
              name: 'routeId',
              check: { rules: [{ required: true, message: '请输入' }] }
            }
          ]
        }
      }
    }
  }
}
</script>

<style lang='less' scoped>
.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}

.basicNew {
  padding: 8px 6px 8px 8px;
  margin-bottom: 16px;

  font-size: 16px;
  font-weight: 700;
}

.title-text {
  width: 100%;
  border: none;
  border-top: 1px solid rgb(192, 196, 204);

}

.bottom-box {
  padding: 8px;

  .first-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .second-line {
    padding: 4px 0 8px 16px;
    min-height: 300px;
    width: 100%;
    background-color: #ececec;
    border-radius: 10px;
}}
.second-table{
  background-color: #f0f2f5;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
</style>